<template>
    <view class="page">
        <view style="background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(183, 235, 192, 0) 100%);">
            <back :title="'服务'" :isBack="false" :isBg="false"></back>
        </view>
        <view class="top_gg_box">
            <image src="https://build.lwjcg.com/uploads/serheader.png" mode="scaleToFill" />
        </view>
        <scroll-view scroll-y class="content_box" v-if="serverList.length > 0" @scrolltolower="lower()">
            <view class="dange_box" @click="goserverDetail(item)" v-for="(item, index) in serverList" :key="index">
                <view class="left_pic_box">
                    <image :src="item.cover_img" mode="widthFix" />
                    <!-- scaleToFill -->
                </view>
                <view class="right_text_box">
                    <view class="cheming_box">{{ item.name }}</view>
                    <view class="wenan_box">
                        {{ item.description }}
                    </view>
                </view>
            </view>
            <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                padding="" :loadTitle="loadTitle"></aLoadMore>
        </scroll-view>

        <view v-else>
            <empoy :imageUrl="'https://build.lwjcg.com/uploads/empty_order.png'" :kongtext="'暂无数据'"></empoy>
        </view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            loadStatus: 'normal',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            page: 1,   // 第一页
            flag: true,  // 防抖开关 防止用户不停的下拉
            serverList: [],
        }
    },
    onShow() {
        this.page = 1
        this.serverList = []
        this.info()
    },
    methods: {
        lower() {
            if (this.flag) {
                this.info();
            } else {
                this.loadStatus = 'normal'
            }

        },
        info() {
            this.loadStatus = 'loading'
            let data = {
                page: this.page
            }
            this.$Request.post(this.$api.server.articleList, data).then(res => {
                if (res.code == 200) {
                    // this.serverList = res.data
                    this.loadStatus = 'down'
                    var serverList = res.data;
                    this.page++;
                    this.serverList = this.serverList.concat(serverList);
                    if (serverList.length < 20) {
                        this.flag = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flag = true
                    }
                }

            })
        },
        goserverDetail(item) {
            uni.navigateTo({
                url: '/userPage/serverDetail/serverDetail?serverId=' + item.id
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;

    .top_gg_box {
        width: 100%;
        height: 340rpx;

        image {
            width: 100%;
            height: 100%;
        }

    }

    .content_box {
        width: 100%;
        height: calc(100vh - 520rpx);
        background-color: rgba(246, 246, 246, 1);

        .dange_box {
            width: 710rpx;
            height: 272rpx;
            border-radius: 14rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            margin-top: 20rpx;
            padding: 0 22rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;

            .left_pic_box {
                width: 230rpx;
                height: 224rpx;
                border-radius: 12rpx;
                background-color: #e8fcee;
                display: flex;
                justify-content: center;
                align-items: center;

                image {
                    width: 100%;
                    // height: 80%;
                }
            }

            .right_text_box {
                width: 400rpx;
                height: 230rpx;
                box-sizing: border-box;
                padding-top: 40rpx;

                .cheming_box {
                    height: 52rpx;
                    opacity: 1;
                    font-size: 36rpx;
                    font-weight: 700;
                    line-height: 52rpx;
                    color: rgba(0, 0, 0, 1);
                    margin-bottom: 28rpx;

                }

                .wenan_box {
                    width: 100%;
                    // height: 116rpx;
                    /** 文本1 */
                    font-size: 26rpx;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 1);
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                    text-overflow: ellipsis;

                }

            }

        }
    }




}
</style>
